<template>
  <CardMode title="艺术家笔记" more="查看全部" @more="clickMore">
    <div class="content">
      <image
        class="img"
        src="https://img.js.design/assets/smartFill/img235164da709e38.jpeg"
        mode="aspectFill"
      />
      <div class="text-info">
        <div class="text">
          文章有详有略，言之有序，内容生动具体，不失为一篇佳作。文章内容新颖，结构合理，流畅连贯，自然通达。细节描写颇具匠心，极富功底。
        </div>
        <div class="data">
          <div class="user">
            <image
              class="head"
              src="https://img.js.design/assets/smartFill/img307164da746310.jpeg"
              mode="scaleToFill"
            />
            马玉瑶
          </div>

          <div class="like">
            <span>
              <wd-icon name="thumb-up" size="30rpx"></wd-icon>
              864
            </span>
            <span>
              <wd-icon name="chat1" size="30rpx"></wd-icon>
              128
            </span>
          </div>
        </div>
      </div>
    </div>
  </CardMode>
  <!-- <div class="note-box">
    <div class="title">
      <span class="text">艺术家笔记</span>
      <div class="more active">
        <span>查看全部</span>
        <span class="i-carbon-chevron-right icon"></span>
      </div>
    </div>
    <div class="content">
    </div>
  </div> -->
</template>
<script setup lang="ts">
import { to } from '@/utils/page'
defineOptions({ name: 'Note' })

const props = defineProps(['hotel'])

function clickMore() {
  console.log('more')
}
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-evenly;
  .img {
    width: 212rpx;
    height: 212rpx;
    border-radius: 20rpx;
  }
  .text-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    width: 0;
    margin-left: 20rpx;
    .text {
      font-size: 27rpx;
      line-height: 38rpx;
      color: var(--color2);
      @include text-clamp(4);
    }
    .data {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 23rpx;
      color: var(--color3);
      .user {
        display: flex;
        align-items: center;
        .head {
          width: 38rpx;
          height: 38rpx;
          margin-right: 10rpx;
          border-radius: 19rpx;
        }
      }
      .like {
        span {
          display: inline-flex;
          align-items: center;
          margin-left: 8rpx;
        }
      }
    }
  }
}
</style>
